# 第2节 js变量数据类型习题和作业
## 今天任务:
1. 完成所有练习
2. 完成所有作业
3. 写总结
4. 预习明天的内容
#### 习题1: 填空
变量是计算机中用来存储数据的(容器)
#### 习题2: 填空
存储在变量中的数据，叫做( 变量的值)
#### 习题3: 填空
给变量存储数据的过程，叫(赋值)，符号是(=)
#### 习题4: 编写代码
1. 声明一个变量并赋值, 用来存放性别
2. 声明一个变量并赋值, 用来存放籍贯
```javascript
var sex = '男';
var address = '河南南阳';
```
#### 习题5: 说出代码结果, 并说明原因
```
console.log(username);
```
undefined
原因：没有声明username变量
#### 习题6: 填空
1. 标识符命名以(字母)、(下划线)、($)开头, 其它字符可以是( 字母、数字、下划线、$)
#### 习题7: 编写代码
声明一个变量用来存放商品列表, 再声明一个变量用来存放优惠券列表
```javascript
var list;
var couponList;
```
#### 习题8: 说出以下代码运行结果, 并说名原因
```javascript
const PI = 3.1415926535;
PI = 123456;
```
结果：3.1415926535
原因：const是常量，不能重新赋值
#### 习题9: 简答题
在js中, 数字类型有哪几种?
整数、小数、NaN、正无穷大（Infinity）
#### 习题10: 简答题
在js中, 字符串有哪几种表达方式
```javascript
var str1 = '';
var str2 = "";
var str3 = ``;
```
#### 习题11: 补充代码
```javascript
var year = 2022;
var month = 8;
var date = 29;
// 将以上变量拼接成xxxx年xx月xx日的形式
console.log(year + '年' + month + '月' + date + '日');
console.log(`${year}年${month}月${date}日`);
```
#### 习题12: 填空
有以下代码, 请问username的值是什么?
`var username;`
答:字符串
#### 习题13: 编写代码
声明一个对象, 用来存放一个商品的信息, 包括:
商品名称、商品原价、商品折扣、商品描述、商品剩余库存、商品销量等
```javascript
var object = {
name:'士力架',
price:2,
discount:80,
decoration:'横扫饥饿，做回自己',
residue:20,
sales:5000,
};
```
#### 习题14: 编写代码
用两种方式实现以下需求:
声明一个数组, 用来存放web前端课程各个阶段的课程内容信息
```javascript
var arr = ['javascript','html','css','vue'];
```
#### 习题15: 编写代码
利用本节知识编写代码,使用最少行数的代码, 在控制台打印30遍(行) hello world, 请问你用了几行?
```javascript
function show(){
console.log("helloworld!");
console.log("helloworld!");
console.log("helloworld!");
console.log("helloworld!");
console.log("helloworld!");
}
show();
show();
show();
show();
show();
```
#### 习题16: 简答题
1. document对象除了write方法外, 再列举document对象的3个方法
```javascript
document.querySelector();
document.getElementsByTagName();
document.write();
```
2. console是个对象吗, 若是请列出它的三个方法
```javascript
是
console.log();
console.count();
console.debug();
```
3. alert是window对象的一个方法, 除了alert之外, 列举window的三个方法
```
console.log();
document.querySelector();
function name(){};
```
#### 习题17: 填空题
1. 检测数据类型用( typeof)
2. 数字类型的英文是(number )
3. 字符串类型的英文是(string )
4. 布尔类型的英文是( boolean)
5. 对象类型的英文是( object)
6. 对象类型的英文是(object )
7. 数组类型的英文是(object)
8. 函数类型的英文是(function)
#### 习题18: 编写代码
1. 使用三种方法获取以下标签, 并保存到变量里
2. 在控制台查看该元素拥有的属性和方法
```
哈哈哈哈哈
```
#### 习题19: 编写代码
使用两种方式给下面的按钮绑定双击事件
```html
```
#### 习题20: 编写代码
实现以下需求
点击编辑, 编辑两字变成"完成", 显示价格修改按钮, 结算变成"删除"
```html
2
2
```
## 习题21 编写代码
实现需求:
点击span的时候, 添加acitve类
```html
```
## (七) 作业
### (1) 简答题
1. 变量是什么,有什么用?
```
变量相当于一个容器，用来存储数据
```
2. 变量有哪几种数据类型,其中简单(基本)数据类型有哪些,复杂(引用)数据类型又有哪些?
```js
简单数据类型：数字类型、字符串类型、布尔类型、null、undefine、symbol
复杂数据类型：对象, 数组, 函数等
```
3. undefined 和 null 有什么异同?
```js
undefined是变量声明了但没赋值
null是声明一个变量打算将来存放对象
```
4. var obj = {name: '张三', age: 40} ,用两种方式在控制台打印属性值 name 的值
```javascript
1.console.log(obj.name);
2.console.log(obj['name']);
```
### (2) 完成以下题目
有以下 result对象, 完成下面两个题目
1. 打印对象里数组的长度
```java
console.log(result.list.length);
```
2. 打印数组最后一个成员的所有属性值
```java
console.log(result.list[result.list.length - 1]);
```
```java
var result = {
"code": 666,
"msg": "success",
"list": [{
"categoryId": 145,
"name": "时令鲜果",
"iconUrl": "/img/fresh/other/r1.png"
}, {
"categoryId": 243,
"name": "海鲜水产",
"iconUrl": "/img/fresh/other/r2.png"
}, {
"categoryId": 279,
"name": "家禽蛋",
"iconUrl": "/img/fresh/other/r3.png"
}, {
"categoryId": 346,
"name": "地方农产",
"iconUrl": "/img/fresh/other/r4.png"
}, {
"categoryId": 436,
"name": "百果园公司",
"iconUrl": "/img/fresh/other/r5.png"
}, {
"categoryId": 357,
"name": "农品茗茶",
"iconUrl": "/img/fresh/other/r6.png"
}, {
"categoryId": 6,
"name": "五谷杂粮",
"iconUrl": "/img/fresh/other/r7.png"
}, {
"categoryId": 311,
"name": "牛羊肉",
"iconUrl": "/img/fresh/other/r8.png"
}]
}
```
1. 有一个数组, var starList = ['赵丽颖', '迪丽热巴', '佟丽娅', '王丽坤', '李丽珍', '邓丽君'];;把数组成员输出到页面上.
```java
```
### (3) 完成下面的需求
* 声明一个对象, 存放你自己的个人信息, 内容包括:
* 姓名,
* 是否有女(男)朋友(不要求真实)
* 年龄,
* 籍贯,
* 爱好
* 上一份工作(应届毕业生则填写学校和专业)
* 声明一个数组, 存放你以及跟你距离最近的五个同学的信息
* 信息尽可能真实
* 在网页上打印出整个数组成员的名字
```java
对象：var information = {
name:'王梦瑶',
isGirlfriend:'True',
age:22,
address:'河南',
hobby:'打乒乓球',
worked:'Student',
}
数组：var arr = ['郭育丞','欧林艺','王江增','王梦瑶','张美文'];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
document.write(arr[3]);
document.write(arr[4]);
```
### (4) 编程题1
```html
Document
//第一个li的内容设置一个任意的字符串内容.;
//然后把p标签内的内容放入最后一个li标签内.
我爱web前端
```
### (5) 编程题2
```html
Document
// 点击按钮后,把5个li添加active类
- 111111
- 222222
- 333333
- 444444
- 555555
Document
// 点击按钮后,把5个li添加active类
- 111111
- 222222
- 333333
- 444444
- 555555
```